<template>
  <p>姓氏：<input v-model="userInfo.firstName"/></p>
  <p>名字：<input v-model="userInfo.lastName"/></p>
<!--  <p>全名：<input v-model="fullName"/></p>-->
  <p>全名：<input v-model="userInfo.fullName"/></p>
</template>

<script>
import {reactive, computed} from 'vue'

export default {
  name: "Demo",
  setup() {
    const userInfo = reactive({
      firstName: '',
      lastName: ''
    })

    // computed 计算属性，传入计算函数，依赖属性改变，计算属性也会随之改变
    /*
    const fullName = computed(() => {
      return userInfo.firstName + ' ' + userInfo.lastName
    })
    */

    // 我们也可以直接把计算属性直接添加为对象的属性
    userInfo.fullName = computed(() => (userInfo.firstName + ' ' + userInfo.lastName))

    return {
      userInfo,
      // fullName
    }
  }
}
</script>

<style scoped>

</style>